<template>
  <button @click="$emit('click')" class="main-button" :style="getStyle">
    <slot></slot>
  </button>
</template>

<script>
export default {
  name: 'RButton',
  props: ['type', 'size'],
  computed: {
    getStyle () {
      let style
      switch (this.type) {
        case 'warning':
          style = {'background': 'orangered'}
          break
        case 'cancel':
          style = {'background': 'lightgrey', 'color': 'black'}
          break
        default: {
          style = {'background': 'lightskyblue'}
        }
      }
      style.padding = this.size === 'small' ? '6px 15px' : '8px 20px'
      return style
    }
  }
}
</script>

<style scoped lang="less">
  .main-button {
    border: none;
    border-radius: 2px;
    color: white;
    cursor: pointer;
    outline: none;

    &:hover{
      filter: brightness(105%);
    }
  }

</style>
